{% extends 'layout.html' %}

{% block main %}
    <div class="page-header">
        <h1>
            新增机架
        </h1>
    </div><!-- /.page-header -->
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div id="config" class="col-sm-14">
                    <form class="form-horizontal" role="form" id="data_form">
                        <div class="space-16"></div>
                        <div class="form-group" style="margin-left: 190px">
                            <label class="col-sm-2 control-label no-padding-right">机房&nbsp;</label>
                            <div class="col-sm-6 tooltip-info" data-rel="tooltip" data-placement="top">
                               <select class="col-sm-3" id="lab" name="lab">
                                   <option value="-1">所有机房</option>
                                    {% for row in lab %}
                                        <option value="{{ row._id }}">{{ row.lab_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="space-16"></div>
                        <div class="form-group" style="margin-left: 190px">
                            <label class="col-sm-2 control-label no-padding-right">机柜&nbsp;</label>
                            <div class="col-sm-6 tooltip-info" data-rel="tooltip" data-placement="top">
                                <select class="col-sm-3" id="cab" name="cab">
                                    <option value="-1">所有机柜</option>
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="space-16"></div>
                        <div class="form-group" style="margin-left: 190px">
                            <label class="col-sm-2 control-label no-padding-right">机架号&nbsp;</label>
                            <div class="col-sm-6 tooltip-info" data-rel="tooltip" data-placement="top">
                                <input id="frame_num" name="frame_num" class="input-sm form-control"
                                       placeholder="请填写机架号"/>
                            </div>
                        </div>
                        <div class="space-16"></div>
                        <div class="form-group" style="margin-left: 190px">
                            <label class="col-sm-2 control-label no-padding-right">机架名称&nbsp;</label>
                            <div class="col-sm-6 tooltip-info" data-rel="tooltip" data-placement="top">
                                <input id="frame_name" name="frame_name" class="input-sm form-control"
                                       disabled/>
                            </div>
                        </div>
                        <div class="space-16"></div>
                        <div class="form-group">
                            <div class="col-md-offset-5 col-md-9">
                                <button class="btn btn-success" type="button" id="btnSubmit">
                                    <i class="ace-icon fa fa-check bigger-110"></i>
                                    提交
                                </button>
                                <button class="btn" type="reset">
                                    <i class="ace-icon fa fa-undo bigger-110"></i>
                                    重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script src="/static/js/chosen.jquery.min.js"></script>
    <script src="/static/js/jquery-ui-1.10.3.full.min.js"></script>
    <script src="/static/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/static/js/all-config.js"></script>
    <script src="/static/js/sweetalert.min.js"></script>
    <script>
        var refresh_cab = function(){
            $.ajax({
                url: "/cmdb/query/getAllSub",
                type: "POST",

                data: JSON.stringify({
                    "ci_id": $('#lab').val()
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.redirect) {
                        window.location.href = data.redirect;
                        return;
                    }
                    if (data.success){
                        $( "#cab").empty();
                        if (data.data.length == 0){
                            $( "#cab").append("<option value='-1'>所有机柜</option>");
                        }else {
                            for (var i = 0, l = data.data.length; i < l; i++) {
                                var record = data.data[i];
                                $("#cab").append("<option value='" + record._id + "'>"
                                        + record.cab_name + "</option>");
                            }
                        }
                        $('#tables').DataTable().fnDraw();
                    }else{
                        showDialog("查询失败", data.message);
                    }
                }
            });
        };
        function updateFrameName() {
            var lab = $('#lab').val();
            var cab = $('#cab').find("option:selected").text();
            var frame_num = $('#frame_num').val();
            if(lab=='-1'){
                $('#frame_name').val("")
            }else {
                var val = cab + '_' + frame_num;
                $('#frame_name').val(val)
            }

        }
       $(function () {
           $('#lab').change(function () {
              refresh_cab()
           });
           $('#frame_num').keyup(function () {
               updateFrameName()
           });
           $('#btnSubmit').click(function () {
               var frame_name = $('#frame_name').val();
               if(frame_name==""){
                   swal("机架名称不能为空");
                   return;
               }
               $.ajax({
                    url: "/cmdb/frame/saveInfo",
                    type: "POST",
                    data: JSON.stringify({
                        "frame_name": frame_name,
                        "frame_desc": frame_name,
                        "ci_type": "frame",
                        "cab_id": $("#cab").val()
                    }),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        if (data.redirect) {
                            window.location.href = data.redirect;
                            return;
                        }
                        if (data.success){
                            swal("新增成功");
                        }else{
                            swal(data.message);
                        }
                    }
               });
           })
       })
    </script>
{% endblock %}